<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Lesson管理系统</title>
    <link rel="stylesheet" href="../../style/main.css">
    <link rel="stylesheet" href="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/font/bootstrap-icons.min.css">
</head>
<body class="bg-dark">

<!--页头-->
<header>
    <!--路径导航: 样式[面包屑 背景色 下外边距]-->
    <ol class="breadcrumb bg-dark mb-0">
        <!--导航项: 样式[面包屑项 当前选中]-->
        <li class="breadcrumb-item"><a href="video.html">视频管理</a></li>
        <li class="breadcrumb-item active">添加视频</li>
    </ol>
</header>

<!--水平线: 样式[背景色 上外边距]-->
<hr class="bg-light mt-0"/>

<!--表单: 样式[右内边距 背景色 前景色 文字居中]-->
<form class="pr-5 bg-dark text-light text-center">

    <!--视频标题框 + 作者框: 样式[表单组 表单行]-->
    <article class="form-group row">
        <!--视频标题-->
        <label for="videoTitleIpt" class="col-sm-2 col-form-label">视频标题</label>
        <input type="text" id="videoTitleIpt" class="form-control col-sm-4"
               placeholder="示例: Java进阶视频">
        <!--视频作者-->
        <label for="authorIpt" class="col-sm-2 col-form-label">视频作者</label>
        <input type="text" id="authorIpt" class="form-control col-sm-4"
               placeholder="示例: 李元芳">
    </article>

    <!--视频价格框 + 评分框: 样式[表单组 表单行]-->
    <article class="form-group row">
        <!--价格-->
        <label for="priceIpt" class="col-sm-2 col-form-label">视频价格</label>
        <input type="number" id="priceIpt" class="form-control col-sm-4"
               placeholder="示例: 2000.00">
        <!--评分-->
        <label for="starIpt" class="col-sm-2 col-form-label">视频评分</label>
        <input type="number" id="starIpt" class="form-control col-sm-4"
               placeholder="示例: 5">
    </article>

    <!--创建日期框 + 修改日期框: 样式[表单组 表单行]-->
    <article class="form-group row">
        <!--创建日期-->
        <label for="createTimeIpt" class="col-sm-2 col-form-label">创建日期</label>
        <input type="datetime-local" class="form-control col-sm-4" id="createTimeIpt">
        <!--修改日期-->
        <label for="modifyTimeIpt" class="col-sm-2 col-form-label">修改日期</label>
        <input type="datetime-local" class="form-control col-sm-4" id="modifyTimeIpt">
    </article>

    <!--视频信息框: 样式[表单组 表单行]-->
    <article class="form-group row">
        <!--信息-->
        <label for="videoInfoArea" class="col-sm-2 col-form-label">视频信息</label>
        <textarea id="videoInfoArea" class="form-control col-sm-10" rows="7"
                  placeholder="示例: 该视频是一个很牛的视频"></textarea>
    </article>

    <!--提交按钮: ID, 类型, 样式[按钮基础 背景色 固定底端 左右外边距 上下外边距]-->
    <button id="insertBtn" type="button" class="btn btn-primary fixed-bottom mx-4 my-1">确认添加</button>

</form>
</body>
</html>